<template>
	<view class="content">
		<!-- 扫码结果 -->
		<view class="check-content" v-if="isShowContent">
			<view class="top-part flex-center-col">
				<view class="name">{{ checkType == 'order' ? '游乐项目' : 'TEAM WANG design' }}</view>
				<view class="title">{{ checkType == 'order' ? checkData.description :
					`${checkType == 'book-offline' ? '限定集市线下登记' : '限定集市预约'}` }}</view>
				<view class="state" :style="{ color: getStateText(checkData) == '待使用' ? '#1F1F1F' : '#D0021B' }">{{
					getStateText(checkData) }}
				</view>
			</view>
			<view class="flex-center-col" v-if="checkType == 'order'">
				<view class="text">订单编号：{{ checkData.out_trade_no }}</view>
				<view class="text">支付时间：{{ checkData.created_time }}</view>
			</view>
			<view class="flex-center-col" v-if="checkType.includes('book')">
				<view class="text">{{ checkData.username }} {{ checkData.gender }}</view>
				<view class="text" style="margin-top: 20px">{{ checkData.date }}</view>
				<view class="text">{{ checkData.time }}</view>
			</view>
			<view class="btn-group flex-center">
				<view class="flex-center" @click="openSao">
					<icon title="sao" size="16" color="#1F1F1F"></icon>
					<view style="margin-left: 5px">继续扫码</view>
				</view>
				<view class="flex-center" @click="confrimCheck"
					v-if="getStateText(checkData) == '待核销' || getStateText(checkData) == '待使用'">
					确认核销</view>
			</view>
		</view>
		<!-- 扫码按钮 -->
		<view class="check-content" v-if="!isShowContent">
			<view class="btn-group flex-center">
				<view class="flex-center" @click="openSao">
					<icon title="sao" size="16" color="#1F1F1F"></icon>
					<view style="margin-left: 5px">开始扫码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import icon from '../../components/icon/icon.vue';
import { formateTime } from '../../utils/formateTime.js';
import { orderState, bookState } from '../../utils/stateEnum';
export default {
	components: {
		icon
	},
	data() {
		return {
			checkType: '',//核销类型 order|book-online|book-offline
			checkId: '',//订单号 | 预约id
			checkData: null,//订单或预约的详细信息
			isShowContent: false,//是否展示扫码结果内容
		}
	},
	methods: {
		formateTime,//注册导入方法
		openSao() {
			let that = this;
			wx.scanCode({
				success(res) {
					console.log('扫码成功', res.result);
					that.checkType = res.result?.split(',')?.[0];
					that.checkId = res.result?.split(',')?.[1];
					// 处理扫码结果
					if (that.checkType == 'order') {
						that.getOrderInfo();
					} else if (that.checkType.includes('book')) {
						that.getBookInfo();
					}
				},
				fail(err) {
					console.error('扫码失败', err);
					// 处理扫码失败的情况
					that.isShowContent = false;
				}
			});
		},
		getStateText(item) {
			if (this.checkType == 'order') {
				switch (item?.status) {
					case orderState.NOPAY:
						return '待支付'
					case orderState.NOUSE:
						return '待使用'
					case orderState.DONE:
						return '已被核销'
					case orderState.REFUNDING:
						return '退款中'
					case orderState.REFUNDED:
						return '已退款'
					case orderState.CLOSED:
						return '已关闭'
				}
			} else {
				switch (item?.status) {
					case bookState.NOUSE:
						return '待核销'
					case bookState.VERIFIED:
						return '已被核销'
					case bookState.EXPIRED:
						return '预约已过期'
					case bookState.CANCELLED:
						return '预约已取消'
				}
			}
		},
		getBookInfo() {
			if (this.checkType == 'book-offline') {
				this.$http.getOfflineDetail({ id: this.checkId }).then((res) => {
					console.log('offline', res);
					this.checkData = res;
					this.isShowContent = true;
				});
			} else {
				this.$http.getBookDetail({ id: this.checkId }).then((res) => {
					console.log('book', res);
					this.checkData = res;
					this.isShowContent = true;
				});
			}
		},
		getOrderInfo() {
			this.$http.getOrderDetail({ out_trade_no: this.checkId }).then((res) => {
				console.log('order', res);
				this.checkData = res;
				this.isShowContent = true;
			});
		},
		confrimCheck() {
			let workToken = uni.getStorageSync('workToken');
			if (this.checkType == 'order') {
				this.$http.orderVerification({ work_token: workToken, out_trade_no: this.checkId }).then(res => {
					console.log(res);
					this.checkData.status = orderState.DONE;
				});
			} else if (this.checkType == 'book-online') {
				this.$http.bookVerification({ work_token: workToken, id: this.checkId }).then(res => {
					console.log(res);
					this.checkData.status = bookState.VERIFIED;
				});
			} else if (this.checkType == 'book-offline') {
				this.$http.offlineVerification({ work_token: workToken, id: this.checkId }).then(res => {
					console.log(res);
					this.checkData.status = bookState.VERIFIED;
				});
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.check-content {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}

.top-part {
	width: auto;
	margin-bottom: 20px;
	position: relative;

	.name {
		font-size: 16px;
		font-weight: 600;
		margin-top: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: 600;
		margin-top: 5px;
	}

	.state {
		font-size: 24px;
		font-weight: 600;
		margin: 44px 0;
	}

	&::after {
		content: '';
		width: calc(100% - 42px);
		height: 1px;
		background-color: $tip2-color;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
	}
}

.text {
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
}

.btn-group {
	padding: 0 18px;
	margin-top: 60px;

	>view {
		flex: 1;
		height: 42px;
		font-size: 14px;
		letter-spacing: 0.8px;
		border: 1px solid $primary-color;

		&:nth-child(1) {
			color: $primary-color;
		}

		&:nth-child(2) {
			margin-left: 15px;
			background-color: $primary-color;
			color: #fff;
		}
	}
}
</style>
